<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
    </a-col>
    <a-col flex="auto" style="width:0;">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
            <z-form-item :datas="fieldArr" :form="queryParam" :submitAction="{ show: true, toggle: true, span: 6 }"
              @change="getChangeTime" @onSubmit="onQuery" @onReset="onResetForm" />
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <div>
            <a-button @click="handleExport">导出</a-button>
          </div>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
            :columns="columns" :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange" />
        </div>
        <!--弹窗区域-->
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as personServiceApi from '@/api/sjsk/personService'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import departTree from '../../modules/departTree'
import { downLoadFileReader } from '@/utils/export-util/util'

export default {
  components: { departTree },
  mixins: [DisabledAuthFilterMixin],
  data() {
    return {
      loading: false,
      isDisabled: true,
      reloading: false,
      toggle: true,
      selectKeys: [],
      queryParam: {},
      fieldArr: [
        { label: '人员姓名', prop: 'name', tagType: 'input', span: 6 },
        { label: '类型', prop: 'sjskType', tagType: 'dict-select', dictCode: 'sjsk_type', span: 6 },
        { label: '身份证号', prop: 'identityCard', tagType: 'input', span: 6 },
        { label: '执行情况', prop: 'personStatus', tagType: 'dict-select', dictCode: 'person_status', span: 6, toggle: false },
        { label: '执行时间', prop: 'date', tagType: 'range-picker', format: 'YYYY-MM-DD', span: 6, toggle: false },
        { label: '居住地执行地区', prop: 'liveDepartmentIds', tagType: 'linkage-area', span: 18, toggle: false },
      ],
      columns: [
        {
          title: '姓名',
          dataIndex: 'realName',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          width: 100,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '类型',
          dataIndex: 'sjskType',
          width: 60,
          align: 'center',
          customRender: text => {
            return this.$filterDictTextByCache('sjsk_type', text)
          }
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          width: 70,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '执行情况',
          dataIndex: 'personStatus',
          width: 70,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={this.$filterDictTextByCache('person_status', text)} length={14} />
          }
        },
        {
          title: '执行时间',
          dataIndex: 'executionDate',
          width: 70,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '户籍地执行地区',
          dataIndex: 'householdTown',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '居住地执行地区',
          dataIndex: 'currentTown',
          width: 80,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '上报时间',
          dataIndex: 'reportTime',
          width: 70,
          align: 'center'
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <span class="action-button">
                <a-button type="link" onClick={event => this.handleRouter(record)}>查看</a-button>
              </span>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() { },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
      // this.$refs.ruleForm.resetFields()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      this.$set(this.queryParam, 'controlPersonType', 1) //	管控人员类型 1：社戒社康 2：社会面人员
      let { date, liveDepartmentIds, ...dataParam } = this.queryParam // 剔除date元素，dataParam最新的对象
      let queryParam = Object.assign({}, dataParam, this.pageFilter)
      this.loading = true
      personServiceApi
        .getAbnormalReportList(queryParam)
        .then(res => {
          this.loading = false
          if (res.success) {
            const { result } = res
            this.pageData = result ? result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 导出
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let idList1 = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      let idList2 = record && Object.keys(record).length > 0 && record.id ? [record.id] : []
      let params = Object.assign(
        {},
        {
          idList: selectList.length > 0 ? idList1 : idList2,
          queryAbnormalReportVO: this.queryParam
        }
      )
      this.$confirm({
        title: `是否确认导出？`,
        okText: '确定',
        onOk() {
          personServiceApi.abnormalReportExport(params).then(async res => {
            const fileName = '省外异地管控异常上报列表.xlsx'
            await downLoadFileReader(res, fileName)
            that.$refs.table.onClearRowKeys()
          })
        }
      })
    },
    // 弹窗成功接收
    modalOk(type) {
      this.onQuery()
    },
    handleAdd() {
      this.$refs.addIntellModalId.show()
    },
    handleRouter(record) {
      this.$router.push({
        path: `/examine/details/6/${record.id}`,
        query: { processId: record.processId }
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    getTreeData(datas, id) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    },
    // 获取组件的值， prop为对应的字段，value为选中的值
    getChangeTime(prop, value) {
      console.log(prop, value)
      if (prop === 'date') {
        this.$set(this.queryParam, 'startDate', value[0])
        this.$set(this.queryParam, 'endDate', value[1])
      }
      if (prop === 'liveDepartmentIds') {
        let data = value && Array.isArray(value) ? value.filter(item => { return item }) : []
        let lastData = data.length > 0 ? data[data.length - 1] : ''
        this.$set(this.queryParam, 'liveDepartmentId', lastData)
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
